<template>
  <div>
    <h2>银行卡号识别银行名称</h2>
    <input v-model="cardNumber" placeholder="请输入银行卡号" />
    <button @click="identifyBank">识别银行名称</button>
    <p v-if="bankName!== null">识别结果：{{ bankName }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      cardNumber: '',
      bankName: null
    };
  },
  methods: {
    async identifyBank() {
      try {
        const response = await axios.post('/identifyBank', this.cardNumber);
        this.bankName = response.data;
      } catch (error) {
        console.error('识别银行名称出错：', error);
        this.bankName = '识别过程出现错误，请稍后再试';
      }
    }
  }
};
</script>
